<template>
  <div class="chart-task-option-setting">
		<div class="task-option-select">
			<el-tooltip
				class="chart-tooltip"
				effect="dark"
				content="此处选择后，报表将根据该维度区分为多条数据进行对比展示。请先筛选需对比的部门、人员，否则默认全部数据过多将影响阅览效果"
				placement="bottom"
			>
				<i class="iconfont icon-jieshishuoming1"></i>
			</el-tooltip>
			<el-select
				:value="selectType"
				@change="handleSelectChange"
				clearable
				placeholder="对比分析维度"
			>
				<el-option
					v-for="item in compareList"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				></el-option>
			</el-select>
		</div>
		<chart-download 
			:chart-type="chartType"
			:type="type"/>
	</div>
</template>

<script>
/* Vue */
import { 
	ref, 
	computed, 
	watch, 
	onMounted, 
	onUnmounted 
} from 'vue';
import ChartDownload from './ChartDownload';

export default {
  name: 'chart-task-option-setting',
  props: {
    chartOption: {
      type: Object,
      default: () => ({})
    },
    chartType: {
      type: String,
      default: ''
    },
		type: {
			type: String,
      default: ''
		}
  },
	data () {
		return {
			compareList: [
        {
          value: 'TEMPLATE',
          label: '工单类型'
        },
        {
          value: 'TAG',
          label: '部门'
        },
        {
          value: 'MAN',
          label: '人员'
        }
      ]
		};
	},
	computed: {
		selectType() {
      return this.chartOption?.selectType
    }
	},
  setup(props, { emit }) {
		const taskOption = ref({
			// 对比分析维度
			selectType: '',
		})
		
		const handleSelectChange = value => {
      taskOption.value.selectType = value
      const newValue = {
        ...props.chartOption,
        selectType: value
      }
      emit('fetchChartData', newValue)
    }

    onMounted(() => {

		})

    onUnmounted(() => {

		})

    return {
			taskOption,
			handleSelectChange
		}
  },
  components: {
    [ChartDownload.name]: ChartDownload,
  }
};
</script>

<style lang="scss" scoped>
.chart-task-option-setting {
	display: flex;
	align-items: center;
	.task-option-select {
		width: 250px;
		margin-left: auto;
		margin-right: 2%;
		.chart-tooltip {
			margin: 0 10px;
		}
	}
}

</style>
